<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>放学管理编辑</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/layui.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.vs__dropdown-toggle {
			border: none !important;
			height: 100%;
		}
	</style>
</head>

<body>

	<div class="layui-row" id="vue-root">
		<div></div>
		<div class="layui-col-md6 layui-col-md-offset3"><br /><br />
			<br /><br />

			<div class="layui-form-item">
				<label class="layui-form-label">班级</label>
				<div class="layui-input-block">
					<v-select v-validate="'required'" name="classesId" data-vv-as="班级" class="layui-input"
						placeholder="请选择班级" label="name" :options="classess" :reduce="item=>item.id"
						v-model="item.classesId"></v-select>
					<div class="checkout_state" v-text="err('classesId')"></div>
				</div>
			</div><br />

			<div class="layui-form-item">
				<label class="layui-form-label">放学时间段</label>
				<div class="layui-input-block">
					<input class="layui-input" id="test9" :value="period" placeholder="请选择放学时间段">
				</div>
			</div><br />

			<div class="layui-form-item">
				<label class="layui-form-label">今日放学时间</label>
				<div class="layui-input-block">
					<input class="layui-input" id="test10" :value="period1" placeholder="请选择今日放学时间">
				</div>
			</div><br />

			<div class="layui-form-item">
				<label class="layui-form-label">卡号</label>
				<div class="layui-input-block">
					<input class="layui-input" v-model="item.cardNo" placeholder="请输入卡号">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">放学时长(分钟)</label>
				<div class="layui-input-block">
					<input type="number" class="layui-input" v-model="item.minute" placeholder="放学时长,默认20分钟">
				</div>
			</div>

			<br />
			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>
	<script>
		Vue.component('v-select', VueSelect.VueSelect);
		var schoolId = top_params().id;

		var app = new Vue(merge({
			data: {
				classess: [],
				url: '/pc/leaveTime',
			},
			created: function () {
				this.init();
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
			},
			methods: {
				formatData: function (data) {
					if (data.today) return;
					data.startTime1 = data.startTime;
					data.endTime1 = data.endTime;
				},
			},
			computed: {
				period: function () {
					var startTime = this.item.startTime, endTime = this.item.endTime;
					if (!startTime || !endTime) return '';
					return startTime + ' - ' + endTime;
				},
				period1: function () {
					var startTime = this.item.startTime1, endTime = this.item.endTime1;
					if (!startTime || !endTime) return '';
					return startTime + ' - ' + endTime;
				}
			}
		}));

		function set(key, value) {
			Vue.set(app.item, key, value);
		}

		laydate.render({
			elem: '#test9',
			type: 'time',
			range: true,
			done: function (value, date, endDate) {
				value = value.replace(' ', '').split('-');
				set('startTime', value[0]);
				set('endTime', value[1]);
				set('startTime1', value[0]);
				set('endTime1', value[1]);
			}
		});

		laydate.render({
			elem: '#test10',
			type: 'time',
			range: true,
			done: function (value, date, endDate) {
				value = value.split(' - ');
				set('startTime1', value[0]);
				set('endTime1', value[1]);
			}
		});
	</script>

</body>

</html>